<template>
  <div>
    <el-container>
      <el-aside width="300px">
        <el-divider/>角色:
          <el-tree
              :data="data"
              node-key="value"
              @node-click="handleCheckChange"
              check-strictly
              :render-after-expand="true"
          />
      </el-aside>
      <el-main>
        <el-divider/>权限菜单:
        <el-tree
              ref="treeRef"
              :data="data1"
              node-key="value"
              show-checkbox
              @check-change="CheckChange"
              :default-checked-keys="form.employee"
              style="width: 240px"
              :default-expand-all="true"
          />
      </el-main>
    </el-container>
    <div style="margin-left: 300px;">
        <el-button style="width: 150px;height: 40px;font-size: 20px;" 
          @click="Create">保存</el-button>
    </div>
    
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';

const form = reactive({
  region: [],
  employee:[],
  mId:[],
  rId:''
})
onMounted(()=>{
  RoleGetAll()
  MenuList()
})
//角色
const data=ref([])
const RoleGetAll=()=>{
  axios.get('Role/RoleGetAll', {
  }).then((ret) => {
    // console.log(ret.data)
    data.value=ret.data.data
  })
}
const data1=ref([])
const MenuList=()=>{
  axios.get('Menu/MenuList'
  ).then((ret) => {
    // console.log(ret.data)
    data1.value=ret.data.data
  })
}
const MenuID=ref([])
// const RoleID=ref([])
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const handleCheckChange = (data:any) => {
    form.rId=data.value
    console.log(form.rId);
    PrivileFan(data.value)
    resetChecked()
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const CheckChange=(data:any,checked:any)=>{
  if(checked){
    MenuID.value.push(data.value)
  }
  else{
    MenuID.value=MenuID.value.filter(x=>x!=data.value)
  }
  
  console.log(MenuID.value);
  form.mId=MenuID.value
}
//反填菜单
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const PrivileFan=(id:any)=>{
  axios.get('Menu/PrivileFan', {
    params: {
      id:id
    }
  }).then((ret) => {
    console.log(ret.data)
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    form.employee = ret.data.map((x:any)=>x.mId)
    console.log(form.employee);
  })
}
//刷新
const treeRef = ref()
const resetChecked = () => {
  treeRef.value!.setCheckedKeys([], false)
}

//角色菜单添加
const Create=()=>{
  const add=reactive({
    rId:form.rId,
    mId:form.mId
  })
  console.log(add);
  // ?rId='+form.rId+'&mId='+MenuID.value
  axios.post('Menu/GetRelatedAdd',add
  ).then((ret) => {
    console.log(ret.data)
    if(ret.data>0){
      ElMessage.success('添加成功')
    }else{
      ElMessage.error('添加失败')
    }
  })
}
</script>

<style scoped>

</style>